<!-- Created by henian.xu on 2018/8/24. -->

<template>
    <Page :title="pageTitle">
        <Container>
            <Divider orientation="left">theme 主题</Divider>
            <XForm
                ref="form"
                :models="formModels"
                :rules="formRules"
            >
                <FormItem
                    prop="account"
                    label="账号">
                    <XInput 
                        clear 
                        v-model="formModels.account"/>
                </FormItem>
                <FormItem
                    prop="password"
                    label="密码"
                    feedback
                    sub-label="我的密码"
                >
                    <XInput
                        type="textarea"
                        clear
                        v-model="formModels.password"/>
                </FormItem>
                <FormItem
                    label="验证码"
                >
                    <XInput/>
                </FormItem>
            </XForm>
            <Button
                theme="main"
                label="验证表单"
                @click="onValidate"
            />
        </Container>
    </Page>
</template>

<script>
import pageMixin from '@/mixins/page';

export default {
    name: 'FormPage',
    mixins: [pageMixin],
    data() {
        return {
            formModels: {
                account: '',
                password: '',
            },
            formRules: {
                account: {
                    required: true,
                    message: '账号不能为空',
                },
                password: {
                    required: true,
                    message: '密码不能为空',
                },
            },
        };
    },
    methods: {
        onValidate() {
            const { form } = this.$refs;
            form.validate()
                .then(valid => {
                    console.log(valid);
                })
                .catch(err => {
                    console.log('catch', err);
                });
        },
    },
};
</script>

<style lang="scss">
</style>
